<template>
  <div>
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>通知公告管理</el-breadcrumb-item>
    </el-breadcrumb>
    <div class="ok-box-center-right">
      <el-form :inline="true" :model="ok_page" class="user-search">
        <el-form-item label="搜索：">
          <el-input size="small" v-model="ok_page.key" placeholder="请输入标题"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button size="small" type="primary" icon="el-icon-search" @click="search">搜索</el-button>
          <el-button size="small" type="primary" icon="el-icon-plus" @click="create">添加</el-button>
        </el-form-item>
      </el-form>
    </div>
    <div>
      <el-table size="small" :data="pagesData.list" highlight-current-row border element-loading-text="拼命加载中" style="width: 100%;">
        <el-table-column prop="title" label="标题">
        </el-table-column>
        <el-table-column prop="createTime" label="时间" width="160">
          <template slot-scope="scope">
            {{ok.date.formatDate(scope.row.createTime)}}
          </template>
        </el-table-column>
        <el-table-column align="center" label="操作" width="260">
          <template slot-scope="scope">
            <div class="ok-box-center">
              <el-button type="success" size="mini" @click="view(scope.row)">查看</el-button>
              <el-button type="primary" size="mini" @click="handleEdit(scope.row)">编辑</el-button>
              <el-button size="mini" type="danger" @click="deleteThis(scope.row)">删除</el-button>
            </div>

          </template>
        </el-table-column>
      </el-table>
    </div>
    <div class="line-20"></div>
    <!--    分页-->
    <div class="block">
      <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page.sync="pagesData.current"
          :page-sizes="[5, 10, 20, 50]"
          :page-size="pagesData.pageSize"
          layout="sizes, prev, pager, next"
          :total="pagesData.total">
      </el-pagination>
    </div>

    <div>
      <el-dialog :title="title" :visible.sync="editFormVisible" width="70%" @close="closeDialog" :modal-append-to-body="false">
        <el-form :model="formData" :rules="formDataRules" ref="form" label-width="100px" class="demo-ruleForm">
          <div style="width: 800px;">
            <el-form-item label="文章标题" prop="title">
              <el-input v-model="formData.title"></el-input>
            </el-form-item>
            <el-form-item label="文章副题目">
              <el-input v-model="formData.subtitle"></el-input>
            </el-form-item>
            <el-form-item label="作者" prop="author">
              <div class="ok-box-left">
                <el-input v-model="formData.author" style="width: 50%;"></el-input>
              </div>
            </el-form-item>
            <el-form-item label="关键词" prop="newsKeyword">
              <div class="ok-box-left">
                <el-input v-model="formData.newsKeyword" style="width: 50%;"></el-input>
              </div>
            </el-form-item>
          </div>
          <div style="width: 400px;">
            <el-form-item label="发布时间" required>
              <el-date-picker
                  v-model="formData.onlineTime"
                  type="datetime"
                  value-format="timestamp"
                  placeholder="选择日期时间"
                  style="width: 100%;">
              </el-date-picker>
            </el-form-item>
          </div>
          <div>
            <el-form-item label="图片">
              <div class="ok-box-left">
                <el-upload class="avatar-uploader" action="http://localhost:8056/public/upload" :show-file-list="false"
                           :on-success="handleAvatarSuccess">
                  <img v-if="formData.thumbnail" :src="ok.tool.getImg(formData.thumbnail)" class="avatar" alt="">
                  <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                </el-upload>
              </div>
            </el-form-item>
          </div>
          <el-form-item label="内容" required>
            <Editor v-model="formData.intro"></Editor>
          </el-form-item>
        </el-form>
        <div class="ok-box-center">
          <el-button size="small" @click="closeDialog">取消</el-button>
          <el-button size="small" type="primary" :loading="loading" class="title" @click="submitForm('editForm')">保存</el-button>
        </div>
      </el-dialog>
    </div>
    <div>
      <el-dialog title="文章详情" :visible.sync="viewVisible" width="70%" @close="closeThis">
        <div class="ok-info ok-background">
          <div class="ok-info ok-white">
            <div class="ok-box">
              <div class="ok-info20" style="margin-top: 20px;">
                <div class="ok-article-body">
                  <div class="line-20"></div>
                  <div style="text-align: center;font-size: 25px; color: #333333">
                    {{info.title}}
                  </div>
                  <div class="line-20"></div>
                  <div style="text-align: center;font-size: 18px; color: #333333">
                    {{info.subtitle}}
                  </div>
                  <div class="line-20"></div>
                  <div class="ok-box-center" style="color: #999999">
                    发表时间：{{ ok.date.formatDateTimeCN(info.onlineTime) }}
                  </div>
                  <div class="ok-box-center" style="color: #999999">
                    作者： {{ info.author }}
                    <div style="padding-left: 20px;"></div>
                    关键字：
                    {{ info.newsKeyword }}
                  </div>
                  <div style="padding: 20px 40px 40px 40px; ">
                    <div v-html="info.intro"></div>
                  </div>
                </div>
              </div>
            </div>
          </div>

        </div>
      </el-dialog>
    </div>
  </div>
</template>
<script>
import api from "@/api/manage"
import Editor from "@/components/InfoEditor.vue";
import ok from "@/assets/ok"
import fa from "element-ui/src/locale/lang/fa";
import Cookies from "js-cookie";
export default {
  computed: {
    ok() {
      return ok
    }
  },
  components: {Editor},
  data(){
    return{
      newsData:{},
      viewVisible:false,
      loading: false,
      viewData:{},
      ok_page:{
        type:"tzgg",
        key:"",
        pageSize:8,
        current:0
      },
      pagesData:{
        list:[],
        pageSize:0,
        current:0,
        total:0
      },
      formData:{
        typeCode:"tzgg",
        typeName:"通知公告",
        title:"",
        subtitle:"",
        sourceName:"",
        author:"",
        newsKeyword:"",
        onlineTime:"",
        level:0,
        thumbnail:"",
        intro:"",
        id:""
      },
      info:{},
      formDataRules:{
        title:  [
          { required: true, message: '请输文章标题', trigger: 'blur' },
        ],
        author: [
          { required: true, message: '请输入作者名字', trigger: 'blur' },
        ],
        onlineTime: [
          { type: 'date', required: true, message: '请选择时间', trigger: 'change' }
        ],
        level: [
          { required: true, message: '请输入推荐等级', trigger: 'blur' },
        ],
        intro: [
          { required: true, message: '请输入文章内容', trigger: 'blur' },
        ]
      },
      editFormVisible:false,
      title:"编辑",
    }
  },
  mounted() {
    this.newsData = this.formData;
    this.getPage();
    this.checkLogin();
  },
  methods:{
    checkLogin(){
      if (!ok.tool.getStatus()){
        this.$router.push("/login")
      }
    },
    getPage(){
      api.getNewsPage(this.ok_page).then(res =>{
        this.pagesData = res.result;
      });
    },
    view(item){
      this.info = item;
      this.viewVisible = true;
    },
    closeThis(){
      this.viewVisible = false;
      this.info = {}
    },
    handleEdit(item){
      this.title = "编辑"
      this.formData = item;
      this.editFormVisible = true;
    },
    deleteThis(item){
      this.$confirm('此操作将永久删除, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        api.deleteNews({id:item.id}).then(res =>{
          this.$message({
            message:"删除成功!",
            type:"success"
          });
          this.getPage();
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });
    },
    create(){
      this.title = "创建"
      this.editFormVisible = true;
    },
    search(){
      this.getPage();
    },
    submitForm(){
      this.$refs.form.validate((valid)=>{
        if (valid){
          let data = {...this.formData}
          this.$confirm('是否保存', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          }).then(() => {
            if (this.formData.id){
              api.editNews(data).then(res =>{
                this.$message({
                  message:"编辑成功!",
                  type:"success"
                });
                this.closeDialog();
                this.getPage();
                this.formData = this.newsData;
              })
            }else{
              api.createNews(data).then(res =>{
                this.$message({
                  message:"创建成功!",
                  type:"success"
                });
                this.closeDialog();
                this.getPage();
                this.formData = this.newsData;
              });
            }
          }).catch(() => {
            this.$message({
              type: 'info',
              message: '已取消'
            });
          });
        }
      })



    },
    handleSizeChange(val){
      this.ok_page.pageSize = val;
      this.getPage();
    },
    handleCurrentChange(val){
      this.ok_page.current = val;
      this.getPage()
    },
    closeDialog(){
      this.editFormVisible = false;
      this.formData = this.newsData
    },
    handleAvatarSuccess(res, file) {
      // this.imageUrl = URL.createObjectURL(file.raw);
      this.formData.thumbnail = res.result;
    },
  }
}
</script>
<style>
/deep/ .el-dialog__wrapper{
  z-index: 99 !important;
}
/deep/ .v-modal{
  z-index: 90 !important;
}
.avatar {
  width: 100px;
  height: 100px;
  display: block;
}
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409EFF;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 100px;
  height: 100px;
  line-height: 100px !important;
  text-align: center;
}
</style>
